// https://juejin.cn/post/6961718112852901896

// 分享职位点击后图片移动到剪切板
var fxImgNum = 1
// 分享职位
$('.searchBox').click(function () {
  // console.log(88779)
  var relid = $(this).attr("fxrelID")
  layer.load();
  $('.fxzwTan .userBox .userText').empty()
  $(".fxzwTan").css("display", "block");
  $(".body-bg").css("display", "block");
  $.ajax({
    type: 'post',
    url: '/ashx/Weixin.ashx',
    data: {
      action: "GetLinshiErweima1",
      relID: relid
    },
    success: function (res) {

      if (res.status == 10001) {
        //console.log(res.data);
        var base64String = btoa(String.fromCharCode.apply(null, res.data));
        $(".code img").attr("src", 'data:image/png;base64,' + base64String.toString())
        $.ajax({
          type: 'post',
          url: '/CompanyCenter/ashx/JobEdit.ashx',
          data: {
            action: "GetReleaseJobInfo",
            id: relid//职位id
          },
          success: function (res) {
            var data = JSON.parse(res);
            if (data.status == 10001) {
              console.log(data.data)
              var list = data.data
              console.log(list.name, list.moneyName, list.shiName, list.wtName, list.quaName, list.reljn, list.hrPhoto, list.hrName, list.comName)
              var html = `<div class="jobName back1">${list.name}</div>
                            <div style="color: #f60;">${list.moneyName}</div>
                            <div>${list.shiName}|${list.wtName}|${list.quaName}|${list.reljn == 1 ? '全职' : list.reljn == 2 ? '兼职' : list.reljn == 3 ? '实习' : list.reljn == 4 ? '灵活用工' : '全职'}</div>
                            <div style="margin-top: 10px;">
                                <div class="userImg">
                                    <img src="" alt="">
                                </div>
                                <div class="userName">${list.hrName} · ${list.comName}</div>
                            </div>`

              $('.fxzwTan .userBox .userText').prepend(html)
              // $(".fxzwTan .userBox .userText .userImg img").attr("src", list.hrPhoto)
              getUrlBase64Callback(list.hrPhoto, function (res) {
                // console.log(999,res)
                $(".fxzwTan .userBox .userText .userImg img").attr('src', res)
                createFxImg()
                layer.closeAll('loading');
              })
            }
          }
        })
      }

    }
  })
})
function createFxImg() {
  // .fxzwTan .rightBack
  console.log($('.fxzwTan .rightBack').width())
  var canvas2 = document.createElement("canvas");
  // var _canvas = document.querySelector('.fxzwTan .rightBack');
  var _canvas = $('.fxzwTan .rightBack')[0];
  // _canvas=$('.fxzwTan .rightBack')
  // var w = parseInt(window.getComputedStyle(_canvas).width);
  // var h = parseInt(window.getComputedStyle(_canvas).height);
  var w = _canvas.offsetWidth; //dom宽
  var h = _canvas.offsetHeight; //dom高
  var scale = 2
  //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
  canvas2.width = w * 2;
  canvas2.height = h * 2;
  canvas2.style.width = w + "px";
  canvas2.style.height = h + "px";
  var context = canvas2.getContext("2d");
  context.scale(scale, scale);
  //设置context位置，值为相对于视窗的偏移量负值，让图片复位(解决偏移的重点)
  // var rect = $('.fxzwTan .rightBack').get(0).getBoundingClientRect();//获取元素相对于视察的偏移量
  // context.translate(-rect.left, -rect.top);
  // var opts={
  //     canvas:canvas2,
  //     useCORS:true,
  //     scrollY:0,
  // }
  html2canvas(_canvas, { canvas: canvas2 }).then(function (canvas) {
    //document.body.appendChild(canvas);
    //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
    document.querySelector(".down").setAttribute('href', canvas.toDataURL());
    $('#copyHb2').attr('src', canvas.toDataURL())
    // $('.down').click(function(){
    //     var href=$(this).attr('href')
    //     console.log(href)
    //     window.open(href)
    // })
    // var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
    // window.location.href = imgUri

    $('.tanChangeBox').click(function () {
      console.log($('.fxzwTan .right .rightBack'))
      if (fxImgNum >= 1 && fxImgNum < 5) {
        $('.fxzwTan .right .rightBack').removeClass('back' + fxImgNum)
        fxImgNum++
        $('.fxzwTan .right .rightBack').addClass('back' + fxImgNum)
      } else {
        $('.fxzwTan .right .rightBack').removeClass('back' + fxImgNum)
        fxImgNum = 1
        $('.fxzwTan .right .rightBack').addClass('back' + fxImgNum)
      }
      createFxImg()
    })
    $('.copyButton').click(function () {
      // console.log($(this).attr('href'))

      var img = document.getElementById('copyHb2');
      img.crossOrigin = "Anonymous";
      var imgUrl = img.src;
      fetch(imgUrl).then(function (response) {
        return response.blob();
      }).then(function (blob) {
        var items = [new ClipboardItem({ [blob.type]: blob })];
        navigator.clipboard.write(items).then(function () {
          // console.log('copy succ')
          // layer
          layer.msg('已复制图片到剪切板', { icon: 1 });
          // navigator.clipboard.write(items)
        }, function (error) {
          console.log('复制失败', error)
          layer.alert('复制失败,请使用谷歌浏览器', { icon: 2 });
        })
      })

    })
  });
}

function getUrlBase64Callback(url, callback) {
  let canvas = document.createElement("canvas"); //创建canvas DOM元素
  const ctx = canvas.getContext("2d");
  const img = new Image();
  img.crossOrigin = "Anonymous";
  img.src = url;
  img.onload = function () {
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img, 0, 0, img.width, img.height);
    const dataURL = canvas.toDataURL("image/jpeg", 1); //可选取多种模式
    callback.call(this, dataURL); //回掉函数获取Base64编码
    canvas = null;
  };
}